<template>
  <div>
    <Form :searchForm="searchForm" ref="formRef"></Form>
    <Table :tableProps="tableProps" :tableData="data" :page-total="200" @my-btn="handBtnClick"></Table>
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from "element-plus"

import config from "./config/index.ts"
let { searchForm, tableProps } = config
// import Form from "@/components/Form/index.vue";
// let formRef = ref<InstanceType<typeof Form>>()
let formRef = ref()
let dialog = ref()
let data = ref([
  {
    type: "normal",
    prop: "name",
    label: "角色名称",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "产品code",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "产品名称",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "产品banner",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "运营商",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "是否扩展",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "产品标题",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "产品副标题",
    width: "120px"
  },
  {
    type: "normal",
    prop: "intro",
    label: "是否统计",
    width: "120px"
  },
  {
    type: "timer",
    prop: "updateAt",
    label: "更新时间"
  }
])
data.value.map((item: any) => {
  item[item.prop] = 'test'
  return item
})
console.log(data)

const handBtnClick = (item: any) => {
  console.log("parent", item)
  if (item.type == "search") {
    console.log('formData.value?.formData', formRef.value?.formData)
    let status = Object.values(formRef.value?.formData).some(value => value === null || value === '');
    if (status) {
      ElMessage.warning("请输入搜索条件")
    }
    console.log(' formRef.value', formRef.value)
    console.log(formRef.value.formData)
  } else if (item.type == "reSet") {
    formRef.value?.resetForm()
  } else if (item.type == "add") {
    dialog.value?.handDialogShow()

  } else if (item.type == "upload") {
  } else if (item.type == "delete") {
  }
}
</script>

<style lang="scss" scope>
.box {}
</style>
